'use strict';
import React, {
    Component
} from 'react'
import {
    Link,
} from 'react-router'
import FieldGroup from "./common/fieldGroup"
import {
    Table,
    Button,
    Modal,
    FormGroup,
    ControlLabel,
    FormControl,
    HelpBlock,
    Radio,
    Pager,
    Col,
    Row
} from 'react-bootstrap'

import '../Scss/style.scss'
import BootstrapPage from './common/page'
export default class Banner extends Component {
    constructor(props) {
        super(props)
        this.state = {
            showModal: false,
            activePage: 1,
            bannerData: "",
            updateId: '',
            formData: {
                title: "",
                pIndex: "",
                type: "",
                imgUrl: "",
                isShow: "",
                content: "",
            },
            query:{
                type:'',
                index:'',
                title:''
            }

        }
    }

    componentWillMount() {
        this.querryData(1)
    }

    /**
     *
     * @param pageNum  查询页数
     */
    querryData(pageNum) {
        let type=this.state.query.type;
        type=type==""?"":parseInt(type)
        // this.state.query.type = parseInt(this.state.query.type);
        const rec = this;
        $.ajax({
            url: `/banner/page/${pageNum}/10`,
            type: "get",
            data:rec.state.query,
            success: function (res) {
                rec.setState({
                    bannerData: res.data
                })
            }
        })
    }

    /**
     * 添加banner
     */
    addBanner() {
        this.setState({
            showModal: true,
            formData: {
                title: "",
                pIndex: "",
                type: "",
                imgUrl: "",
                isShow: 1,
                content: "",
            }
        })
    }

    /**
     * 关闭弹框
     */
    modalClose() {
        this.setState({
            showModal: false
        })
    }


    /**
     *
     * @param eventKey
     * @returns {XML}
     * 选择页数
     */
    handleSelect(eventKey) {
        this.setState({
            activePage: eventKey
        })
    }


    /**
     * 新增banner
     */

    saveData(e) {
        const rec = this;
        var data = new FormData();
        const form = e.target;
        let result = this.state.formData;
        let formData = this.state.formData;
        if (this.state.updateId != "") {
            formData.id = this.state.updateId
        }
        let Url = this.state.updateId == "" ? "/banner/add" : "/banner/update"
        let uploadPic = new Promise(function (resolve, reject) {
            if (formData.imgUrl == "") {
                var pic = form[3].files[0];
                data.append('file', pic);
                $.ajax({
                    url: "upload/uploadPic?token=eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIzMzc4MSIsImlhdCI6MTUwNjE0ODI0NSwiaXNzIjoiMTUyMDgyMDY4MDgiLCJhdWQiOiJndWFyZGlhbiJ9.YpztKWHAVdEXwzdELZLSsvF5M4tuR-rTMa5oYYVOmjA",
                    type: "post",
                    async: false,
                    data: data,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (res) {
                        formData.imgUrl = "http://192.168.2.12/images/" + res;
                        rec.setState({
                            formData: formData
                        })
                        resolve(formData)
                    }
                })
            } else {
                resolve(formData)
            }


        })
        uploadPic.then(function (formData) {
            if(formData.title==''){
                alert('标题不能为空')
                return
            }
            if(formData.pIndex==''){
                alert('展示栏位不能为空')
                return
            }
            if(formData.content==''){
                alert('内容不能为空')
                return
            }
            if(formData.imgUrl==''){
                alert('图片不能为空')
                return
            }
            $.ajax({
                url: Url,
                type: "post",
                data: formData,
                success: function (data) {
                    rec.setState({
                        showModal: false
                    })
                    rec.querryData(1)
                }
            })
        })
    }

    /**
     *
     * @param e
     * @param id  banner的id
     */
    deleteBanner(id) {
        const rec = this;
        $.ajax({
            url: "/banner/delete",
            type: "post",
            data: {
                ids: id
            },
            success: function (data) {
                if (data.code == 200) {
                    rec.querryData(1)
                }
            }
        })
    }

    /**
     *
     * @param data 当前修改banner数据
     * @param e
     */
    updateBanner(data, e) {
        this.state.formData = {
            title: data.title,
            pIndex: data.pIndex,
            type: data.type,
            imgUrl: data.imgUrl,
            isShow: data.isShow,
            content: data.content,
        }
        this.setState({
            updateId: data.id,
            showModal: true,
            formData: this.state.formData
        })
    }

    /**
     *
     * @param name input 的标识
     * @param e
     */
    inputChange(name, e) {
        this.state.formData[name] = e.target.value
        this.setState({
            formData: this.state.formData
        })
    }

    /**
     *是否展示改变事件
     */
    showChange(e) {
        this.state.formData.isShow = !this.state.formData.isShow
        this.setState({
            formData: this.state.formData
        })
    }

    bannerType(type) {
        switch (type) {
            case 1:
                return "案例展示"
            case 2:
                return "随寻生态圈"
            default:
                return '未知'
        }
    }

    /**
     *  改变查询数据
     *
     */

    changeQuery(type,e){
        this.state.query[type] =e.target.value
        this.setState({
            query: this.state.query
        })

    }
    render() {
        const {update, bannerData, formData} = this.state;
        const rec = this;
        const tableData = bannerData.list ? bannerData.list.map(function (data, index) {
            return (
                <tr>
                    <td className="hidden">{data.id}</td>
                    <td>{index + 1}</td>
                    <td><img className="smallpic" src={data.imgUrl}/></td>
                    <td>{rec.bannerType(data.type)}</td>
                    <td>{data.pIndex}</td>
                    <td>{data.isShow == 1 ? "是" : "否"}</td>
                    <td>{data.title}</td>
                    <td>{data.content}</td>
                    <td><Button onClick={rec.updateBanner.bind(rec, data)}>修改</Button> <Button
                        onClick={rec.deleteBanner.bind(rec, data.id)}>删除</Button></td>
                </tr>
            )
        }) : []
        return (
            <div className='bannerPage'>
                <Row md={12}>
                    <div className="addBtn">

                        <FormGroup controlId="formControlsSelect">
                            <Button md={2} bsStyle="info" onClick={this.querryData.bind(this,1)} >查询</Button>
                            <Button md={2} bsStyle="info" onClick={this.addBanner.bind(this)} style={{float:'right',marginRight:'40px'}}>添加banner</Button>
                            <Col md={2}>
                                <FormControl componentClass="select" placeholder="请选择banner类型" onChange={this.changeQuery.bind(this,'type')}>
                                    <option value="">全部</option>
                                    <option value={1}>案例展示</option>
                                    <option value={2}>随寻生态圈</option>
                                </FormControl>
                            </Col>
                            <Col md={2}>
                                <FormControl
                                    type="text"
                                    value={this.state.value}
                                    placeholder="请输入banner标题"
                                    onChange={this.changeQuery.bind(this,'title')}
                                    style={{display:'inline-block'}}
                                />
                            </Col>
                            <Col md={2}>
                                <FormControl
                                    type="text"
                                    value={this.state.value}
                                    placeholder="请输入banner栏位"
                                    onChange={this.changeQuery.bind(this,'index')}
                                    style={{display:'inline-block'}}
                                />
                            </Col>

                        </FormGroup>
                    </div>
                </Row>

                <Table striped bordered condensed hover responsive className="bannerTable">
                    <thead>
                    <tr>
                        <th className="hidden">id</th>
                        <th>序号</th>
                        <th>图片</th>
                        <th>所属页面</th>
                        <th>展示栏位</th>
                        <th>是否展示</th>
                        <th>标题</th>
                        <th>内容</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {tableData}
                    </tbody>
                </Table>
                {/*<Pager>*/}
                {/*<Pager.Item previous href="#">&larr; 上一页</Pager.Item>*/}
                {/*<Pager.Item next href="#">下一页 &rarr;</Pager.Item>*/}
                {/*</Pager>*/}
                <BootstrapPage
                    pages={bannerData.pages}
                    pageNum={bannerData.pageNum}
                    prePage={bannerData.prePage}
                    nextPage={bannerData.nextPage}
                    itemclick={this.querryData.bind(this)}
                />
                <div className="addContent">
                    <Modal show={this.state.showModal} onHide={this.modalClose.bind(this)}>
                        <Modal.Header closeButton>
                            <Modal.Title>banner信息</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <form id="addBanner" onSubmit={this.saveData.bind(this) }>
                                <FieldGroup
                                    id="title"
                                    inputRef="title"
                                    type="text"
                                    label="标题"
                                    placeholder="请输入标题"
                                    value={formData.title}
                                    onChange={this.inputChange.bind(this, 'title')}

                                />
                                <FieldGroup
                                    id="pIndex"
                                    type="number"
                                    label="展示栏位"
                                    min={1}
                                    placeholder="请输入数字"
                                    value={formData.pIndex}
                                    onChange={this.inputChange.bind(this, 'pIndex')}
                                />
                                {/*<FieldGroup*/}
                                {/*id="type"*/}
                                {/*label="页面"*/}
                                {/*type="number"*/}
                                {/*value={formData.type}*/}
                                {/*onChange={this.inputChange.bind(this, 'type')}*/}
                                {/*/>*/}
                                <FormGroup controlId="formControlsSelect" className="bannerTypeSelect">
                                    <ControlLabel>所属页面</ControlLabel>
                                    <FormControl componentClass="select" placeholder="请选择banner类型"
                                                 onChange={this.inputChange.bind(this, 'type')}>
                                        <option value={1}>案例展示</option>
                                        <option value={2}>随寻生态圈</option>
                                    </FormControl>

                                </FormGroup>
                                <FieldGroup
                                    id="imgUrl"
                                    type="file"
                                    label="图片"
                                    // help="请上传合适大小的图片"
                                />
                                <img className="smallBanner" src={formData.imgUr}/>
                                <FormGroup>
                                    <ControlLabel style={{marginRight:"20px"}}>是否展示</ControlLabel>
                                    <Radio controlId="show" value={1} inline name="isShow"
                                           checked={formData.isShow == "1" ? true : false}
                                           onChange={this.showChange.bind(this)}>
                                        是
                                    </Radio>
                                    <Radio controlId="hidden" value={0} inline name="isShow"
                                           checked={formData.isShow == "0" ? true : false}
                                           onChange={this.showChange.bind(this)}>
                                        否
                                    </Radio>
                                </FormGroup>
                                <FormGroup controlId="content">
                                    <ControlLabel>内容</ControlLabel>
                                    <FormControl value={formData.content}
                                                 onChange={this.inputChange.bind(this, 'content')}
                                                 componentClass="textarea"/>
                                </FormGroup>
                                <Button bsStyle="info" type="submit">确定</Button>
                            </form>
                        </Modal.Body>
                        <Modal.Footer>
                        </Modal.Footer>
                    </Modal>

                </div>
            </div>
        )
    }
}
